// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
// import {router} from './router'
import axios from 'axios';
// import Mint from 'mint-ui';
import VueAxios from 'vue-axios';
import {
  Field,
  Spinner,
  Switch,
} from 'mint-ui';
import 'mint-ui/lib/style.css';
import PortalVue from 'portal-vue';
import store from './store/index';
import { router } from './route-config';
import App from './App';
// import './assets/icons'
// import './assets/icons.css'
import './assets/iconfont/iconfont.css';
import './assets/iconfont/iconfont';

// Vue.use(Mint);
Vue.use(VueAxios, axios);
Vue.use(PortalVue);

// config
// Vue.config.silent = true
// Vue.config.devtools = false
Vue.config.performance = true;


const MyPlugin = {};
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // console.log('MyPlugin myGlobalMethod')
  };

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind(el, binding, vnode, oldVnode) {
      // console.log('MyPlugin directive')
    },
  });

  // 3. 注入组件选项
  Vue.mixin({
    created() {
      // console.log('MyPlugin created')
    },
  });

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // console.log('MyPlugin $myMethod')
  };
};

Vue.use(MyPlugin);


Vue.config.productionTip = false;

Vue.directive('test', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    el.style.top = `${binding.value}px`;
  },
});


const version = Number(Vue.version.split('.')[0]);

Vue.mixin({
  created() {
    const { myOption } = this.$options;
    if (myOption) {
      // console.log(myOption)
      // console.log(version)
    }
  },
});

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted(el, binding, vnode, oldVnode) {
    // 聚焦元素
    el.focus();
    // console.log('el')
    console.log(el);
    // console.log('binding')
    console.log(binding);
    // console.log('vnode')
    console.log(vnode);
    // console.log('oldVnode')
    console.log(oldVnode);
  },
  update(el, binding, vnode, oldVnode) {
    console.log('update');
    console.log(binding.value);
    console.log(binding.oldValue);
    console.log(binding.arg);
  },
  bind() {
    console.log('bind');
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    console.log('componentUpdated');
    console.log(binding.value);
    console.log(binding.oldValue);
  },
  unbind() {
    console.log('unbind');
  },
});

Vue.directive('demo', {
  bind(el, binding, vnode) {
    const s = JSON.stringify;
    el.innerHTML = `name: ${s(binding.name)}<br>`
      + `value: ${s(binding.value.color)}<br>`
      + `expression: ${s(binding.expression)}<br>`
      + `argument: ${s(binding.arg)}<br>`
      + `modifiers: ${s(binding.modifiers)}<br>`
      + `vnode keys: ${Object.keys(vnode).join(', ')}`;
  },
});

Vue.directive('pin', {
  bind(el, binding, vnode) {
    el.style.position = 'fixed';
    const s = (binding.arg === 'left' ? 'left' : 'user.scss');
    el.style[s] = `${binding.value}px`;
  },
});

Vue.directive('color-swatch', (el, binding) => {
  el.style.backgroundColor = binding.value;
});

Vue.component('anchored-heading', {
  render(createElement) {
    return createElement(
      `h${this.level}`, // 标签名称
      this.$slots.default, // 子节点数组
    );
  },
  props: {
    level: {
      type: Number,
      required: true,
    },
  },
});

Vue.filter('capitalize', (value) =>
  // if (!value) return ''
  // value = value.toString()
  value.trim());

Vue.filter('capitalize1', (value) => {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` 是组件的继承关系追踪
  console.error(msg);
  console.log('全局捕获到异常啦啦啦啦');
};

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  'media-play-pause': 179,
  up: [38, 87],
};

Vue.component(Field.name, Field);
Vue.component(Spinner.name, Spinner);
Vue.component(Switch.name, Switch);


new Vue({
  el: '#app',
  router,
  axios,
  store,
  myOption: 'hello! app',
  components: { App },
  template: '<App/>',
  data() {
    return {
      msg: 'hello?',
    };
  },
});

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
  console.log('全局捕获到错误啦啦啦啦');
  console.log(`err ${err}`);
  console.log(vm);
  console.log(`info ${info}`);

  // 重定向
  router.replace('/error');
  // console.log(this.router)
  // console.log(this.$router)
};
